<template>
  <div>
    <h1>首页</h1>
    <button
      :class="{ 'my-active': 'add' == active }"
      @click="handlerToPage('add')"
    >
      新增首页</button
    >&nbsp;&nbsp;&nbsp;
    <button
      :class="{ 'my-active': 'edit' == active }"
      @click="handlerToPage('edit')"
    >
      修改首页</button
    >&nbsp;&nbsp;&nbsp;
    <button
      :class="{ 'my-active': 'del' == active }"
      @click="handlerToPage('del')"
    >
      删除首页</button
    >&nbsp;&nbsp;&nbsp;
    <button @click="$router.back()">返回</button>
    <!-- <router-link to="/home/add">新增首页</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/home/edit">修改首页</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/home/del">删除首页</router-link> -->
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active:'add'
    };
  },
  watch:{
      "$route":{
          handler(route) {
            console.log(route);
            this.active = route.meta.active

          },
          deep:true,
          immediate:true
      }

    },
  methods: {
    // handlerToPage(type) {
    //   this.active = type;
    //   // 跳转  / 绝对路径   不加/  相对路径
    //   // 如果父组件是名字匹配的  子组件是路径匹配必须写绝对路径
    //   this.$router.push({
    //     path: `/home/${type}`,
    //   });
    // },
    handlerToPage(type) {
     // this.active = type;
      // 跳转  / 绝对路径   不加/  相对路径
      // 如果父组件是名字匹配的  子组件是路径匹配必须写绝对路径
      this.$router.push({
        name: `home${type}`,
      });
    },
  },
};
</script>

<style></style>
